import React, { Key, useRef, useState } from 'react';
import { GCrudTable, GIcon } from 'geminis-react';
import { Button, Divider, message, Upload } from 'antd';
import styles from '../category/components/tree.less';
import { CagegoryTree } from '@/pages/everydata/category/components/tree';
import { FormEdit } from '@/pages/everydata/form/components/edit/edit';
import { Move } from '@/pages/everydata/form/components/move/move';

export default () => {
  const table = useRef<any>();
  const tree = useRef<any>();
  const [tableSelection, setTableSelection] = useState<{
    selectedKeys: React.Key[];
    selectedRows: any[];
  }>();
  const [treeSelection, setTreeSelection] = useState<Key[]>();

  const onTreeSelect = (selectedKeys: Key[]) => {
    table.current.loadData({
      filters: [
        {
          field: 'category.id',
          compareType: selectedKeys[0] === '' ? 'is null' : '=',
          value: selectedKeys[0],
        },
      ],
    });
    setTreeSelection(selectedKeys);
  };

  const tableSchema = {
    title: '表单信息',
    table: {
      schema: {
        data: {
          autoload: false,
          url: '/api/everydata/forms',
        },
      },
      schemaPath: '/everydata-pc/schemas/form/table.json',
    },
    add: false,
    edit: false,
  };

  return (
    <div className={styles.main}>
      <div className={styles.tree}>
        <CagegoryTree ref={tree} onSelect={onTreeSelect} />
      </div>
      <Divider type="vertical" className={styles.fullHeight} />
      <div className={styles.content}>
        <GCrudTable
          ref={table}
          schema={tableSchema}
          onSelected={setTableSelection}
          external={{
            pos0: (
              <FormEdit
                text="新建"
                icon="icon-plus"
                categoryId={treeSelection?.[0]?.toString()!}
                onSaved={() => table.current.loadData()}
              />
            ),
            pos1: (
              <FormEdit
                text="编辑"
                icon="icon-edit"
                disabled={tableSelection?.selectedKeys?.length !== 1}
                formId={tableSelection?.selectedKeys[0]?.toString()}
                categoryId={treeSelection?.[0]?.toString()!}
                onSaved={() => table.current.loadData()}
              />
            ),
            pos2: (
              <Move
                id={tableSelection?.selectedKeys[0]?.toString()}
                disabled={tableSelection?.selectedKeys?.length !== 1}
                onOk={() => {
                  table.current.loadData();
                }}
              />
            ),
            pos3: (
              <>
                <Button
                  icon={<GIcon type="icon-download" />}
                  disabled={tableSelection?.selectedKeys.length !== 1}
                  onClick={() => {
                    window.open(
                      '/api/everydata/forms/' +
                        tableSelection?.selectedKeys[0] +
                        '/export',
                    );
                  }}
                >
                  导出
                </Button>
                <Upload
                  showUploadList={false}
                  action={
                    '/api/everydata/forms/import/' +
                    treeSelection?.[0]?.toString()
                  }
                  onChange={(info) => {
                    if (info.file.status === 'done') {
                      message.success('成功');
                      table.current.loadData();
                    } else if (info.file.status === 'error') {
                      message.error('失败');
                    }
                  }}
                >
                  <Button icon={<GIcon type="icon-upload" />}>导入</Button>
                </Upload>
              </>
            ),
          }}
        />
      </div>
    </div>
  );
};
